<template>
	<u-grid v-if="mediaType === 1" :col="3" :border="false">
		<u-grid-item v-for="(item,index) in resourceUrls" :key="index" :customStyle="style" @click="itemClick(index)">
			<u-image class="img" width="200rpx" height="200rpx"  :src="item" border-radius="20rpx"></u-image>
		</u-grid-item>
	</u-grid>
	<view v-else-if="mediaType === 2" class="video-view">
		<u-image
			width="200rpx"
			height="200rpx"
			border-radius="20rpx"
			:src="wrapSnapshot(resourceUrls[0])"
		/>
		<u-icon @click="playClick" class="video-play" size="80" name="play-circle-fill"></u-icon>
	</view>
	<view v-else></view>
</template>

<script>
	import { wrapVideoSnapshot } from '@/utils/utils'
	export default {
		name:"MultiMediaView",
		props: {
			//1 照片 2视频
			mediaType: {
				type: Number,
				default () {
					return 1
				}
			},
			resourceUrls: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				style: {
					'padding': '0 0',
					// 'background-color': '#007AFF'
				}
			};
		},
		methods: {
			itemClick(current) {
				console.log('itemClick');
				uni.previewImage({
					urls: this.resourceUrls,
					current: current,
				});
			},
			
			playClick() {
				this.$u.route({
					url: 'pages_base/common/player/player',
					params: {
						url: this.resourceUrls[0],
						update: 'false',
						controls:'1'
					}
				})
			},
			
			wrapSnapshot(url) {
				return wrapVideoSnapshot(url);
			},
		}
	}
</script>

<style lang="scss">
	.img{
		margin-top: 10rpx;
	}
	
	.video-view{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		height: 200rpx;
		.video {
			align-self: center;
		}
		.video-play{
			position: absolute;
		}
	}
</style>
